import type { VNode } from 'vue'
import type { FormInstance } from 'element-plus'
import { defineComponent, ref } from 'vue'
import { ElForm, ElFormItem, ElRow, ElCol, ElButton, ElSpace } from 'element-plus'
import AliIcon from '../AliIocn'
import { GUTTER, SPAN_STYLE_SIX } from '~/utils/const'
import styles from './index.module.scss'

export default defineComponent({
  name: 'SearchForm',
  props: [
    'searchFormProps',
    'searchformResponsiveCol',
    'useGridLayout',
    'handleSearchList',
    'loading'
  ],
  setup(props, { expose }) {
    const searchFormRef = ref<FormInstance>()
    // 暴露方法给父组建
    expose({ searchFormRef })
    return () => {
      const { searchFormProps, searchformResponsiveCol, useGridLayout, handleSearchList, loading } =
        props
      return (
        <ElForm ref={searchFormRef} {...searchFormProps}>
          {useGridLayout ? (
            <ElRow gutter={GUTTER} class={styles['search-form-row']}>
              {searchformResponsiveCol?.map((item: VNode) => (
                <ElCol
                  {...(searchFormProps?.colSpan
                    ? { span: searchFormProps?.colSpan }
                    : SPAN_STYLE_SIX)}
                >
                  {item}
                </ElCol>
              ))}
              <ElCol {...SPAN_STYLE_SIX}>
                <ElFormItem
                  class={styles['search-form-item-btns']}
                  v-slots={{
                    label: searchFormProps.labelPosition === 'top' ? () => <>&nbsp;</> : undefined
                  }}
                  prop="searchFormSearchBtn"
                >
                  <ElButton
                    // class={styles['search-btn']}
                    loading={loading}
                    type="primary"
                    onClick={handleSearchList}
                  >
                    <AliIcon type="icon-sousuo" />
                    &nbsp; 搜索
                  </ElButton>
                  <ElButton
                    loading={loading}
                    type="primary"
                    plain
                    onClick={async () => {
                      await searchFormRef.value?.resetFields()
                      handleSearchList()
                    }}
                  >
                    <AliIcon type="icon-zhongzhi" />
                    &nbsp; 重置
                  </ElButton>
                </ElFormItem>
              </ElCol>
            </ElRow>
          ) : (
            <ElSpace wrap>
              {searchformResponsiveCol?.map((item: VNode) => item)}
              <ElFormItem>
                <ElButton loading={loading} type="primary" onClick={handleSearchList}>
                  <AliIcon type="icon-sousuo" />
                  &nbsp; 搜索
                </ElButton>
              </ElFormItem>
              <ElFormItem>
                <ElButton
                  loading={loading}
                  type="primary"
                  plain
                  onClick={async () => {
                    await searchFormRef.value?.resetFields()
                    handleSearchList()
                  }}
                >
                  <AliIcon type="icon-zhongzhi" />
                  &nbsp; 重置
                </ElButton>
              </ElFormItem>
            </ElSpace>
          )}
        </ElForm>
      )
    }
  }
})
